<template>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" :height="height" :width="width">
        <rect x="0" y="0" :width="width" :height="height" stroke="#333" stroke-width="1" fill="none"></rect>
        <text x="10" y="40" >{{ title }}</text>
        <circle :cx="width/2" :cy="height/2" :r="radius" :stroke="grayColor" stroke-width="1" :fill="grayColor"/>
        <path v-if="percent > 0" id="b" :d="svgD" stroke="#47c5b2" stroke-width="1" fill="#47c5b2" />
        <circle :cx="width/2" :cy="height/2" :r="radius*0.7" stroke="#fff" stroke-width="1" fill="#fff"/>
        <text :x="width/2" :y="height/2" text-anchor="middle" alignment-baseline="middle">
            <tspan :x="width/2" :y="height/2 - 20" style="fill:#aaa">{{ title }}</tspan>
            <tspan :x="width/2" :y="height/2 + 20" style="fill:#333;font-size:32px;font-weight:bold;">{{showPercent}}%</tspan>
        </text>
        <defs>
            <g id="desc">
                <circle cx="10" cy="16" r="3" stroke="#47c5b2" stroke-width="1" fill="#47c5b2"/>
                <circle cx="10" cy="36" r="3" :stroke="grayColor" stroke-width="1" :fill="grayColor"/>
                <text x="20" y="0" style="font-size:12px;fill:#333">
                    <tspan x="20" y="20">{{ $t('collection.recallRatio') }}</tspan><!--催回比例-->
                    <tspan x="20" y="40">{{ $t('collection.proportionNotRecalled') }}</tspan><!--未催回比例-->
                </text>
            </g>
        </defs>
        <use href=#desc :x="width - 100" :y="height - 60"/>
    </svg>
</template>

<script src='./main.js'></script>

<style lang="scss" scoped>

</style>
